<template>
    <!-- <el-table :data="tableData" style="width: 100%">
        <el-table-column label="岗位" >
            <template #default="scope">
                <el-text v-if="scope.row.role">{{scope.row.role.name}}</el-text>
            </template>
        </el-table-column>
        <el-table-column label="人员" >
            <template #default="scope">
                <el-text >{{scope.row.user.name}}</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="level" label="层级" />
        <el-table-column fixed="right" label="操作" width="100">
            <template #default="scope">
                <el-link type="primary" @click="onEdit(scope.$index)">编辑</el-link>
                <el-popconfirm name="确定要删除么?" @confirm="onDelete(scope.row.id)">
                        <template #reference>
                            <el-link type="primary" >删除</el-link>
                        </template>
                    </el-popconfirm>
            </template>
        </el-table-column>
    </el-table> -->
    <h1>审批流程</h1>
    <el-table :data="tableData" style="width: 100%" border @cell-click="onSlectUser">
        <el-table-column label="项目" align="center">
            <template #default="scope">
                <el-text>{{scope.row.title}}</el-text>
            </template>
        </el-table-column>
        <el-table-column label="项目部" align="center" :width="120">
            <template #default="scope">
                <div style="width: 100%;" v-for="item in scope.row.processess" :key="item.id">
                    <el-text v-if="item.level == 1">{{ item.user.name }}</el-text>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="预算员" align="center" :width="120">
            <template #default="scope">
                <div style="width: 100%;" v-for="item in scope.row.processess" :key="item.id">
                    <el-text v-if="item.level == 2">{{ item.user.name }}</el-text>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="综合管理部" align="center" :width="120">
            <template #default="scope">
                <div style="width: 100%;" v-for="item in scope.row.processess" :key="item.id">
                    <el-text v-if="item.level == 3">{{ item.user.name }}</el-text>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="项目合伙人" align="center" :width="120">
            <template #default="scope">
                <div style="width: 100%;" v-for="item in scope.row.processess" :key="item.id">
                    <el-text v-if="item.level == 4">{{ item.user.name }}</el-text>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="总经理" align="center" :width="120">
            <template #default="scope">
                <div style="width: 100%;" v-for="item in scope.row.processess" :key="item.id">
                    <el-text v-if="item.level == 5">{{ item.user.name }}</el-text>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="财务" align="center" :width="120">
            <template #default="scope">
                <div style="width: 100%;" v-for="item in scope.row.processess" :key="item.id">
                    <el-text v-if="item.level == 6">{{ item.user.name }}</el-text>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="出纳" align="center" :width="120">
            <template #default="scope">
                <div style="width: 100%;" v-for="item in scope.row.processess" :key="item.id">
                    <el-text v-if="item.level == 7">{{ item.user.name }}</el-text>
                </div>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog v-model="isEdit" title="设置审批" width="60%">
        <el-form ref="ruleFormRef" style="width: 100%" :model="ruleForm" label-width="auto" size="large" status-icon >
            <el-form-item label="人员" prop="user_id">
                <component :is="userAllSelect" :data="ruleForm.user_id" :role_type=1 @onUserSelect="onUserSelect" />
            </el-form-item>
        </el-form>
        <el-divider />
        <div class="text-center">
            <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存 </el-button>
            <el-popconfirm title="确定要删除么?" @confirm="onDelete(ruleForm.id)">
                <template #reference>
                    <el-button type="warning" v-if="ruleForm.id" :loading="loading"> 删除 </el-button>
                </template>
            </el-popconfirm>
            
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import http from '../../../util/request';
import userAllSelect from '@/components/userAllSelect.vue';
import { ElMessage, FormInstance } from 'element-plus';
const loading = ref<boolean>(false)
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<any>({id:0,role_id:0,user_id:0,level:1,type:'',project_id:0,})
const form = ref<any>({id:0,role_id:0,user_id:0,level:1,type:'apply',project_id:0})
const isEdit = ref<boolean>(false)
const tableData = ref<any>([])
const onGetData = () => {
    http.post('/project/processess',form.value).then((response:any)=>{
        tableData.value = response.data.data
    })
}

const submitForm = async (formEl: FormInstance | undefined) => {
    console.log(ruleForm.value)
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            let request:any = null
            if(ruleForm.value.id){
                request = http.patch('/approve/processess',ruleForm.value)
            }else{
                request = http.put('/approve/processess',ruleForm.value)
            }
            request.then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);
                    return
                }
                onGetData()
                isEdit.value = false
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const onSlectUser = (row: any, column: any) => {
    if(column.no == 0){
        return
    }
    ruleForm.value.id = 0
    ruleForm.value.user_id = 0
    row.processess.forEach((e:any) => {
        if(column.no == e.level){
            ruleForm.value.user_id = e.user.id
            ruleForm.value.id = e.id
        }
    });
    ruleForm.value.project_id = row.id
    ruleForm.value.level = column.no
    isEdit.value = true
    console.log(row)
}

const onDelete = (id:number) => {
    loading.value = true
    http.delete('/approve/processess/' + id).then((response:any)=>{
        loading.value = false
        if(response.data.code != 200){
            ElMessage.error(response.data.msg);
            return
        }
        onGetData()
        isEdit.value = false
    })
}

onMounted(()=>{
    onGetData()
})

const onUserSelect = (user_id: any) => {
    ruleForm.value.user_id = user_id
}

</script>

<style scoped>
h1{text-align: center;font-size: 2rem;}
</style>